import {
  Button,
  Input,
  InputNumber,
  RadioButton,
  RadioGroup,
  Space
} from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { companyApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { useDialog } from '@/hooks/useDialog'
import { bus, formatDate, optionsToMap } from '@/utils'
import { selectStatus } from '@/views/order/constants'

import { getRejectTypeStr } from '../common'

export default defineComponent({
  name: 'SalesCompany',
  setup() {
    const { showConfirm } = useDialog()
    const tableRef = ref({} as ProTableRef)
    const memberName = ref('' as any)
    const memberId = ref(0 as any)
    const statusCur = ref(-1)
    const selectIsBelong = ref([
      { label: '全部', value: '0' },
      { label: '是', value: '1' },
      { label: '否', value: '2' }
    ])
    const rejectDlgRef = ref({})
    const awaitCount = ref(0)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        toolbarConfig: {
          slots: {
            buttons: 'toolbarButtons'
          }
        },
        formConfig: {
          items: [
            {
              title: '销售公司名称',
              field: 'funame',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入销售公司名称',
                  allowClear: true
                }
              }
            },
            {
              title: '联系人',
              field: 'contacts',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入名字',
                  allowClear: true
                }
              }
            },
            {
              title: '联系人电话',
              field: 'phone',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },
            {
              title: '对公账号',
              field: 'bankAccountNo',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入银行账号',
                  allowClear: true
                }
              }
            },
            {
              title: '所属服务商账号姓名',
              slots: {
                default: 'inputmemberName'
              }
            },
            {
              title: '是否有所属服务商',
              field: 'isBelongServiceProvider',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                props: {
                  placeholder: '全部',
                  allowClear: true
                },
                options: selectIsBelong
              }
            },
            {
              title: '所属服务商账号ID',
              slots: {
                default: 'inputId'
              }
            },
            {
              slots: {
                default: () => {
                  return (
                    <Space style={{ marginLeft: '20px' }}>
                      <Button type="primary" htmlType="submit">
                        查询
                      </Button>
                      <Button
                        htmlType="reset"
                        onClick={() => {
                          memberName.value = null
                          memberId.value = null
                        }}
                      >
                        重置
                      </Button>
                    </Space>
                  )
                }
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 150,
          resizable: true
        },
        columns: [
          {
            title: '销售公司ID',
            field: 'id',
            width: 180
          },
          {
            title: '销售公司全称',
            field: 'funame',
            width: 160
          },
          {
            title: '销售简称',
            field: 'companyShortname',
            width: 100
          },
          {
            title: '公众号简称',
            field: 'wxmpShortname'
          },
          {
            title: '同步时间',
            slots: {
              default: 'getTime'
            },
            width: 180
          },
          {
            title: '状态',
            field: 'status',
            formatter: ({ cellValue }) => {
              return optionsToMap(selectStatus)[cellValue]
            }
          },
          {
            title: '所属服务商',
            field: 'belongtoMemberName'
          },
          {
            title: '基本账号姓名',
            field: 'memberName',
            width: 130
          },
          {
            title: '法人',
            field: 'accountName',
            width: 130
          },
          {
            title: '公司注册地址',
            field: 'registerAddress',
            slots: {
              default: 'address'
            }
          },
          {
            title: '联系人',
            field: 'contacts',
            width: 120
          },
          {
            title: '联系人电话',
            field: 'phone',
            width: 150,
            slots: {
              default: 'phone'
            }
          },
          {
            title: '对公银行',
            field: 'bankBranchName',
            width: 200
          },
          {
            title: '对公银行账号',
            field: 'bankAccountNo',
            width: 200
          },
          {
            title: '操作',
            field: 'action',
            slots: {
              default: 'editCompany'
            }
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await companyApi.getCompanyList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                status: statusCur.value != -1 ? statusCur.value : null,
                memberName: memberName.value,
                memberId: memberId.value,
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    onMounted(() => {
      const { form } = tableRef.value.table.getProxyInfo()!
      memberName.value = route.query.accountName
      memberId.value = route.query.id
      bus.on('refreshSalesCompanysList', () => {
        nextTick(() => {
          tableRef.value.refresh()
        })
      })
    })

    const router = useRouter()
    const route = useRoute()
    //编辑
    function handleEdit(item) {
      router.push({
        name: 'EditInSalesCompany',
        query: {
          id: item.id
        }
      })
    }
    //编辑记录
    function checkaAtion(item) {
      router.push({
        name: 'SalesCompanyRecord',
        query: {
          id: item.id
        }
      })
    }
    return {
      statusCur,
      tableRef,
      tableConfig,
      rejectDlgRef,
      memberName,
      memberId,
      awaitCount,
      selectIsBelong,
      selectStatus,
      handleEdit,
      checkaAtion
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            getTime: ({ row }) => (
              <span
                v-show={
                  row.belongtoMemberName == null && row.lastSyncTime != null
                }
              >
                <span style={{ color: 'red' }}>new</span>{' '}
                {formatDate(row.lastSyncTime)}
              </span>
            ),
            inputmemberName: ({ row }) => (
              <Input
                v-model:value={this.memberName}
                placeholder={'请输入'}
                type:number
              ></Input>
            ),
            inputId: ({ row }) => (
              <InputNumber
                style={{ marginLeft: '12px' }}
                v-model:value={this.memberId}
                placeholder={'请输入'}
              ></InputNumber>
            ),
            editCompany: ({ row }) => (
              <div>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleEdit(row)}
                >
                  编辑
                </Button>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.checkaAtion(row)}
                >
                  操作记录
                </Button>
              </div>
            ),
            toolbarButtons: () => {
              return (
                <RadioGroup
                  v-model:value={this.statusCur}
                  onChange={() => {
                    this.tableRef.refresh()
                  }}
                >
                  <RadioButton value={-1}>全部</RadioButton>
                  <RadioButton value={1}>{`已开通${
                    this.awaitCount ? '(' + this.awaitCount + ')' : ''
                  }`}</RadioButton>
                  <RadioButton value={0}>开通中</RadioButton>
                  <RadioButton value={2}>已停业</RadioButton>
                </RadioGroup>
              )
            },
            address: ({ row }) => {
              if (row.registerAddress == null) {
                return `/`
              } else {
                return row.registerAddress
              }
            },
            phone: ({ row }) => {
              if (row.phone == null) {
                return `/`
              } else {
                return row.phone
              }
            }
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
